<template>
  <div>
    <Layout :gutter="24" :span="['', '']" :color="['','']" >
      <template #left>
        <div class="menu-box">
          <div
            v-for="(item, index) in menu"
            :key="item.name"
            class="menu-item"
            :class="{ menu_item: activeIndex === index }"
            @click="handleMenuClick(index, item.route)"
          >
            <img
              :src="activeIndex === index ? item.active : item.patch"
              alt=""
            />
            <span :class="{ active: activeIndex === index }">{{
              item.name
            }}</span>
          </div>
        </div>
      </template>
      <template #right>
        <userCentre v-if="activeIndex == 0"></userCentre>
        <personalize v-else-if="activeIndex == 1"></personalize>
      </template>
    </Layout>
  </div>
</template>

<script setup lang="ts">
import userCentre from './individualPage/userCentre/index.vue';
import personalize from './individualPage/personalize/index.vue';
interface MenuItem {
  name: string;
  patch: string | undefined;
  active?: string | undefined;
  route: string;
}


const route = useRoute();
const router = useRouter();

const icons = import.meta.glob('~/assets/manage/*.svg', {
  eager: true,
  query: '?url',
  import: 'default',
});
const active = import.meta.glob('~/assets/manage/active/*.svg', {
  eager: true,
  query: '?url',
  import: 'default',
});

const activeIndex = ref(0);

const menu = ref<MenuItem[]>([
  {
    name: '个人中心',
    patch: icons['/assets/manage/icon_zhensuo_nor.svg'] as string,
    active: active['/assets/manage/active/icon_zhensuo_sel.svg'] as string,
    route: '/individual/individualPage/userCentre',
  },
  {
    name: '个性化设置',
    active: active['/assets/manage/active/icon_yaoku_sel.svg'] as string,
    patch: icons['/assets/manage/icon_yaoku_nor.svg'] as string,
    route: '/individual/individualPage/personalize',
  },
 
]);

const handleMenuClick = (index: number, routePath: string) => {
  activeIndex.value = index;
  // router.push(routePath);
};

// 根据当前路由设置activeIndex
const updateActiveIndex = () => {
  const currentPath = route.path;
  const menuIndex = menu.value.findIndex(item => currentPath.startsWith(item.route));
  if (menuIndex !== -1) {
    activeIndex.value = menuIndex;
  }
};

// 监听路由变化
watch(() => route.path, () => {
  updateActiveIndex();
}, { immediate: true });
</script>

<style scoped lang="scss">
.menu-box {
  padding-top: 6px;
}

.menu_item {
  background: rgba(24, 179, 171, 0.1);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #16ada4;
}

.menu-item {
  width: 216px;
  height: 36px;
  cursor: pointer;
  margin: 6px 8px;
  padding: 0 16px;
  padding-top: 3px;
  font-family: Microsoft YaHei, Microsoft YaHei;

  img {
    vertical-align: middle;

    width: 16.67px;
    height: 16.67px;
  }

  span {
    vertical-align: middle;
    font-size: 14px;
    margin-left: 8px;
  }
}

.menu-item span.active {
  color: #16ada4;
  font-weight: bold;
  vertical-align: middle;
  margin-left: 8px;
}
</style>
